<!-- football.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育比分网</title>
    <!-- Tailwind CSS CDN -->
    <script src="../../common/js/tailwindcss.js"></script>
    <!-- Lucide Icons -->
    <script src="../../common/js/lucide.min.js"></script>
    <style>
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
        /* 未选中状态 */
        .tab-button {
            background-color: white;
            color: #4B5563; /* text-gray-600 */
            border-color: #E5E7EB; /* border-gray-200 */
        }

        /* 选中状态 */
        .tab-active {
            background-color: #EBF5FF; /* light blue background */
            color: #2563EB; /* text-blue-600 */
            border-color: #2563EB; /* border-blue-600 */
        }
    </style>
</head>
<body class="min-h-screen bg-gray-100">
<!-- 主导航栏 -->
<nav class="bg-white shadow-md top-0">
    <div class="max-w-7xl mx-auto px-4">
        <!-- 上层导航 - Logo和用户功能区 -->
        <div class="flex justify-between items-center h-16">
            <div class="flex items-center">
                <button onclick="toggleMenu()" class="p-2 rounded-md hover:bg-gray-100">
                    <i data-lucide="menu"></i>
                </button>
                <span class="ml-4 text-xl font-bold">体育比分网</span>
            </div>
            <div class="flex items-center space-x-4">
                <i data-lucide="search"></i>
                <i data-lucide="bell"></i>
                <i data-lucide="user"></i>
            </div>
        </div>

        <!-- 下层导航 - 主要功能区 -->
        <div class="flex items-center space-x-6 h-12 text-gray-600">
            <!-- 主要功能导航 -->
            <a href="/"
               class="flex items-center h-full border-b-2 border-blue-500 text-blue-500 px-1">
                比分直播
            </a>
            <a href="/video/video.html"
               class="flex items-center h-full border-b-2 border-transparent hover:text-blue-500 hover:border-blue-500 px-1">
                <i data-lucide="play" class="w-4 h-4 mr-1"></i>
                视频集锦
            </a>
            <a href="/news/news.html"
               class="flex items-center h-full border-b-2 border-transparent hover:text-blue-500 hover:border-blue-500 px-1">
                <i data-lucide="newspaper" class="w-4 h-4 mr-1"></i>
                新闻资讯
            </a>
        </div>
    </div>
</nav>

<main class="max-w-7xl mx-auto px-4 py-6">
    <!-- 面包屑导航 -->
    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-6">
        <a href="/" class="hover:text-blue-500">首页</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>足球赛事</span>

        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="../basketball/basketball.html" class="hover:text-blue-500">篮球赛事</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>

        <a href="../basketball/basketball.html" class="hover:text-blue-500">棒球赛事</a>
    </div>

    <!-- 足球比分 Widget -->
    <div id="wg-api-football-games"
         data-host="v3.football.api-sports.io"
         data-key="68e3b6a93705d8742e8b67a6861842ab"
         data-date=""
         data-league=""
         data-season=""
         data-theme="default"
         data-refresh="15"
         data-show-toolbar="true"
         data-show-errors="true"
         data-show-logos="true"
         data-modal-game="true"
         data-modal-standings="true"
         data-modal-show-logos="true">
    </div>
</main>

<script
        type="module"
        src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

</body>
</html>
